<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>象棋</title>
</head>

<body>
  <div id="box">
    <div id="help">
    </div>
  </div>
  <div style="display: flex;justify-content: center;align-items: center;">
    <h1 style="margin: 16px 8px;">当前行动：</h1>
    {{if player == '红'}}
    <div class="lattice" style="width: 73px;
      height: 75px;
      margin: 0rem 0.15rem;
      background-size: cover;background-image: url('{{_res}}img/r_j.png')"></div>
    {{/if}}
    {{if player == '黑'}}
   <div class="lattice" style="width: 73px;
      height: 75px;
      margin: 0rem 0.15rem;
      background-size: cover;background-image: url('{{_res}}img/b_j.png')"></div>
    {{/if}}
    <h2>{{user_name}}</h2>
    <h4 style="margin: 16px;">Created by Yunzai-Bot & xianyu-plugin</h4>
  </div>
  

  <script>

    let box = document.getElementById("box")
    let data_box = [] // 棋子数据

    const img = {
      red: {
        車: 'img/r_c.png',
        馬: 'img/r_m.png',
        象: 'img/r_x.png',
        士: 'img/r_s.png',
        将: 'img/r_j.png',
        炮: 'img/r_p.png',
        兵: 'img/r_z.png',
      },
      black: {
        車: 'img/b_c.png',
        馬: 'img/b_m.png',
        象: 'img/b_x.png',
        士: 'img/b_s.png',
        将: 'img/b_j.png',
        炮: 'img/b_p.png',
        兵: 'img/b_z.png',
      }
    }

    let map = '{{map}}' // 地图
    map = map.split(',');
    let archive = '{{archive}}' // 双方棋子标记
    archive = archive.split(',');
    let ss = '{{ss}}' // 移动轨迹地图
    ss = ss.split(',');

    let isrollback = '{{isrollback}}'
    document.getElementById("help").innerHTML = ""

    if (isrollback === 'on') {
      document.getElementById("box").style.backgroundImage = "url('{{_res}}img/bg2.png')";
    }

    map.forEach((e, index) => {
      if (e !== '空' && archive[index] == '黑') { // 玩家A，黑棋
        if (ss[index] == '黑box') {
          data_box.push(`<div class="lattice" style="background-image: url('{{_res}}${img.black[e]}')"><div class="b latticebox"></div></div>`)
        } else {
          data_box.push(`<div class="lattice" style="background-image: url('{{_res}}${img.black[e]}')"></div>`)
        }
      }

      if (e !== '空' && archive[index] == '红') { // 玩家B，红棋
        if (ss[index] == '红box') {
          data_box.push(`<div class="lattice" style="background-image: url('{{_res}}${img.red[e]}')"><div class="r latticebox"></div></div>`)
        } else {
          data_box.push(`<div class="lattice" style="background-image: url('{{_res}}${img.red[e]}')"></div>`)
        }
      }
      if (e === '空') {
        if (ss[index] == '黑box') {
          data_box.push(`<div class="lattice"><div class="b latticebox"></div></div>`)
        } else if (ss[index] == '红box') {
          data_box.push(`<div class="lattice"><div class="r latticebox"></div></div>`)
        } else {
          data_box.push(`<div class="lattice"></div>`)
        }
      }
    });

    box.innerHTML = data_box.join('')

  </script>

  <style>
    body {
      background-color: bisque;
    }

    #app {
      display: flex;
    }

    #box {
      display: flex;
      height: 830px;

      justify-content: center;
      flex-wrap: wrap;
      background-image: url('{{_res}}img/bg.png');
      background-size: cover;
      padding: 40px;
      margin: 10px 0px;
    }

    .b {
      background-image: url('{{_res}}img/b_box.png');
    }

    .r {
      background-image: url('{{_res}}img/r_box.png');
    }

    .latticebox {
      width: 100%;
      height: 100%;
      background-size: cover;
    }

    #box .lattice {
      width: 73px;
      height: 75px;
      margin: 0rem 0.15rem;
      background-size: cover;
    }

    th {
      text-align: center;
      background-color: #fddbb3;
    }

    th,
    td,
    th,
    #help {
      border: 2px solid #B58863;
      border-left-color: #fff;
      border-top-color: #fff;
      text-align: left;
      padding: 8px;
    }
  </style>

</body>

</html>